<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>专业词汇</title>
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="../common/css/common.css">
		<link rel="stylesheet" href="css/toolbox.css">
		
		<style>
			.van-empty {
				margin-top: 50px;
			}

			.van-empty__description {
				margin-top: -80px;
			}

			.contentscroll {
				overflow: scroll;
			}

			.line1 {
				display: -webkit-box;
				text-overflow: ellipsis;
				word-break: break-all;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
		</style>
	</head>
	<body style="background-color: white;">
		<div id="app" v-cloak class="margin">
			<form action="/">
				<van-search v-model="value" placeholder="输入词汇名称进行查询" @search="search" @clear='onClose'></van-search>
			</form>
			<div class="contentscroll" :style="{height: contentHeight}">
				<van-list v-if="nothing==1" v-model="loading" offset='300' :finished="finished"
					finished-text="没有更多了" :immediate-check="false" @load="onLoad">
					<div class="pw_item" v-for="item in detail">
						<p class="pw_category">{{item.category}}</p>
						<p class="pw_wordname" v-for="item1 in item.dataList" @click='linkToDetail(item1.dataId)'>{{item1.wordName}}</p>
					</div>
				</van-list>
			</div>
			<van-empty v-if="nothing==2" class="custom-image" image="../doctor/img/blank_pic.png"
				description="— 未搜索到相关内容 —" />

		</div>
		</div>
	</body>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js"></script>
	<script src="../common/js/axios.min.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<script src="../base.js"></script>
	<script src="../common/js/url.min.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl
		} from '../common/js/api/vue3-axios-utils.js'


		const PatientData = {
			data() {
				return {
					url: {
						wordList: '/article/word/grouplist'
					},
					page: 1,
					pageSize: 10,
					total_page: 0,
					nothing: 1,
					active: 0,
					detail: [],
					searchList: [],
					value: '',
				};
			},
			watch: {},
			created() {},
			mounted() {
				this.contentHeight = document.documentElement.clientHeight - 54 - 44 + 'px'
				this.getWordList()
			},
			methods: {
				getWordList() {
					postAction(spliceUrl(this.url.wordList)).then(res => {
						res = res.data
						if (res.success) {
							if (res.result.length > 0) {
								this.nothing = 1
								res.result.forEach(function(i){
									if(i.category=='['){
										i.category = '#'
									}
								})
								this.detail = res.result
								this.total_page = res.result.pages
							} else {
								this.nothing = 2
								this.detail = []
							}
						} else {
							console.log(res.message)
						}
					})
				},
				linkToDetail(id) {
					window.location.href = 'proDetail.html?id=' + id
				},
				search(val) {
					postAction(spliceUrl(this.url.wordList), {
						keyWord: val
					}).then(res => {
						res = res.data
						if (res.success) {
							if (res.result.length > 0) {
								this.nothing = 1
								this.detail = res.result
							} else {
								this.nothing = 2
								this.detail = []
							}
						} else {
							console.log(res.message)
						}
					})
				},
				onClose() {
					this.detail = []
					this.getWordList()
				},
			},

		};

		const app = Vue.createApp(PatientData);

		app.use(vant);
		app.use(vant.Lazyload);

		app.mount("#app");
	</script>
</html>
